includes/Admin/views/post-form.php (1)

2-10: Add documentation for version-based view splitting

The code introduces a significant architectural change by splitting views based on the pro version. Consider adding a comment block explaining:

• The reason for the version-based split
• The differences between the two views
• The minimum version requirements

 <?php
+/**
+ * Renders the form builder view based on the WPUF Pro version.
+ * 
+ * For versions < 4.0.12: Uses legacy view with 'wpuf_admin_form_builder' hook
+ * For versions >= 4.0.12: Uses new redesigned view with 'wpuf_admin_form_builder_view' hook
+ */
 if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.12', '<' ) ) {

admin/form-builder/assets/js/components/form-post_title/template.php (1)

7-8: Consider consolidating class management

The current implementation mixes dynamic class binding with static classes, which could lead to maintenance issues and potential class conflicts.

Consider consolidating all classes into the class_names method:

-:class="class_names('textfield')"
-class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+:class="class_names('textfield', [
+  'wpuf-block',
+  'wpuf-w-full',
+  'wpuf-rounded-md',
+  'wpuf-py-1.5',
+  'wpuf-text-gray-900',
+  'wpuf-shadow-sm',
+  'placeholder:wpuf-text-gray-400',
+  'sm:wpuf-text-sm',
+  'sm:wpuf-leading-6',
+  'wpuf-border',
+  'wpuf-border-gray-300'
+])"

admin/form-builder/assets/js/components/form-post_tags/template.php (1)

4-5: Consider removing the !important flag from border class

The styling changes look good and align with the UI redesign objectives. However, the !wpuf-border-gray-300 class uses an !important flag which might indicate specificity issues in the CSS cascade.

Consider resolving any specificity conflicts and removing the !important flag:

-class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border wpuf-border-gray-300"

admin/form-builder/assets/js/components/form-textarea_field/template.php (1)

11-14: Maintain consistent prop naming conventions

The text editor props use mixed naming conventions:

• default_text uses snake_case
• rich uses camelCase

Consider standardizing to camelCase for better Vue.js convention adherence.

 <text-editor
     v-if="'no' !== field.rich"
-    :default_text="field.default"
+    :defaultText="field.default"
     :rich="field.rich"></text-editor>

admin/form-builder/assets/js/components/form-post_excerpt/template.php (1)

5-5: Optimize Tailwind CSS class organization

The class string could be optimized for better maintainability:

1. Remove redundant border declarations (wpuf-border and !wpuf-border-gray-300)
2. Consider removing the ! important flag as it might cause specificity issues

-class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border-gray-300"

admin/form-builder/assets/js/components/form-dropdown_field/template.php (1)

4-4: Consider extracting static classes to improve maintainability

While the Tailwind classes provide good styling, having numerous static classes directly in the template reduces maintainability. Consider moving these to a computed property or component defaults.

- class="wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+ :class="[baseSelectClasses, class_names('select_lbl')]"

Add to component:

computed: {
  baseSelectClasses() {
    return 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300'
  }
}

admin/form-builder/assets/js/components/form-section_break/template.php (2)

1-8: Consider simplifying the conditional logic and enhancing class names.

The regular section break implementation looks good, but could be improved for maintainability.

Consider these improvements:

 <div class="wpuf-fields">
     <div
-        v-if="!field.divider || field.divider === 'regular'"
+        v-if="['regular', undefined, null, ''].includes(field.divider)"
         class="wpuf-section-wrap">
         <h2 class="wpuf-section-title">{{ field.label }}</h2>
         <div class="wpuf-section-details">{{ field.description }}</div>
-        <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-full"></div>
+        <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-full wpuf-section-divider"></div>
     </div>

The changes:

1. Use includes() for clearer intent in handling different falsy values
2. Add semantic class wpuf-section-divider to the border element for better maintainability

---

1-18: Overall implementation aligns well with the UI redesign objectives.

The section break component successfully implements two distinct visual styles while maintaining a clean and maintainable structure. The use of Vue.js conditional rendering and Tailwind CSS for styling is appropriate for this use case.

Consider documenting these visual styles in a UI component library or style guide to maintain consistency across the form builder interface.

admin/form-builder/assets/js/components/form-image_upload/template.php (2)

4-6: LGTM! Consider documenting the builder_class_names utility.

The new Tailwind classes create a well-structured button layout with proper spacing and alignment.

Consider adding a code comment explaining the expected output of builder_class_names('upload_btn') for better maintainability.

---

8-10: Add ARIA attributes for better accessibility.

The SVG icon implementation is clean and follows best practices, but could benefit from accessibility improvements.

Consider adding these ARIA attributes to the SVG:

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5" 
+    aria-hidden="true" role="img" aria-label="Add image">

admin/form-builder/assets/js/components/form-taxonomy/template.php (1)

21-21: Consider multiselect-specific styling class

While using builder_class_names('select') maintains consistency, consider adding multiselect-specific styling to better handle the unique UI requirements of multiple selections.

-:class="builder_class_names('select')"
+:class="[builder_class_names('select'), 'wpuf-multiselect']"

package.json (1)

38-41: LGTM! Consider using exact versions for better reproducibility

The Tailwind CSS setup is comprehensive and aligns well with the form builder UI redesign objective. However, using caret ranges (^) might lead to unexpected behavior if minor updates introduce breaking changes.

Consider using exact versions for better reproducibility:

-    "vite": "^5.1.4",
-    "tailwindcss": "^3.3.5",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31"
+    "vite": "5.1.4",
+    "tailwindcss": "3.3.5",
+    "autoprefixer": "10.4.16",
+    "postcss": "8.4.31"

admin/form-builder/assets/js/components/form-checkbox_field/template.php (2)

2-18: LGTM! Consider adding ARIA labels for better accessibility.

The non-inline checkbox layout implementation looks good with proper structure and styling. The use of Tailwind CSS classes and nested divs creates a clean, maintainable layout.

Consider adding ARIA labels for better accessibility:

 <input
     type="checkbox"
     :value="val"
     :checked="is_selected(val)"
     :class="class_names('checkbox_btns')"
+    :aria-label="label"
     class="wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600 focus:wpuf-ring-indigo-600 !wpuf-mt-0.5">

---

20-35: Consider extracting common checkbox attributes to reduce duplication.

The inline layout implementation is correct, but there's duplication of checkbox input attributes between inline and non-inline versions.

Consider extracting common attributes to a computed property:

+ computed: {
+   checkboxAttributes() {
+     return {
+       type: 'checkbox',
+       value: this.val,
+       checked: this.is_selected(this.val),
+       class: [
+         this.class_names('checkbox_btns'),
+         'wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600'
+       ]
+     }
+   }
+ }

  // Then in template:
- <input
-   type="checkbox"
-   :value="val"
-   :checked="is_selected(val)"
-   :class="class_names('checkbox_btns')"
-   class="!wpuf-mt-[.5px] wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600">
+ <input v-bind="checkboxAttributes" class="!wpuf-mt-[.5px]">

src/css/admin/form-builder.css (2)

6-12: Enhance button accessibility and states

The button styles look good but could benefit from additional states for better accessibility and user experience:

Consider applying these improvements:

 .wpuf-btn-primary {
-    @apply wpuf-rounded-md wpuf-bg-green-800 wpuf-text-white hover:wpuf-bg-green-700 hover:wpuf-text-white wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold;
+    @apply wpuf-rounded-md wpuf-bg-green-800 wpuf-text-white hover:wpuf-bg-green-700 hover:wpuf-text-white wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold
+           focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-green-500 focus:wpuf-ring-offset-2
+           disabled:wpuf-opacity-50 disabled:wpuf-cursor-not-allowed;
 }

 .wpuf-btn-secondary {
-    @apply wpuf-rounded-md wpuf-bg-green-50 wpuf-text-green-700 wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-border wpuf-border-green-300 wpuf-font-semibold hover:wpuf-bg-green-100 hover:wpuf-text-white;
+    @apply wpuf-rounded-md wpuf-bg-green-50 wpuf-text-green-700 wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-border wpuf-border-green-300 wpuf-font-semibold 
+           hover:wpuf-bg-green-100 hover:wpuf-text-green-800
+           focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-green-500 focus:wpuf-ring-offset-2
+           disabled:wpuf-opacity-50 disabled:wpuf-cursor-not-allowed;
 }

---

15-31: Consider using Tailwind's built-in transition utilities

Instead of creating custom transition utilities, consider using Tailwind's built-in classes:

• wpuf-transition-all → transition-all
• wpuf-duration-100 → duration-100
• wpuf-ease-out → ease-out
• wpuf-scale-95 → scale-95
• wpuf-scale-100 → scale-100

This would reduce code duplication and maintain consistency with Tailwind's utility-first approach.

admin/form-builder/assets/js/mixins/add-form-field.js (1)

49-54: Consider enhancing the action button styling implementation

While the Tailwind classes implementation is clean, consider these improvements:

1. The classes could be more maintainable if broken down into semantic groups
2. The hover state could benefit from a transition effect

Here's a suggested improvement:

 computed: {
     action_button_classes: function() {
-        return 'wpuf-p-2 hover:wpuf-cursor-pointer hover:wpuf-text-white';
+        return [
+            // Layout
+            'wpuf-p-2',
+            // Interactive states
+            'hover:wpuf-cursor-pointer',
+            'hover:wpuf-text-white',
+            'wpuf-transition-colors',
+            'wpuf-duration-200'
+        ].join(' ');
     }
 },

This refactoring:

• Improves maintainability by grouping classes semantically
• Adds smooth color transition on hover
• Makes it easier to modify specific aspects of the styling

admin/form-builder/assets/js/mixins/form-field.js (3)

36-60: Consider refactoring to reduce duplication with class_names

The new builder_class_names method duplicates logic from the existing class_names method. Consider extracting the common logic into a shared helper method.

- builder_class_names: function(type_class) {
-     var commonClasses = '';
-     switch (type_class) {
-         // ... switch cases
-     }
-     return [
-         type_class,
-         this.required_class(),
-         'wpuf_' + this.field.name + '_' + this.form_id,
-         commonClasses
-     ];
- },
+ _getBaseClasses: function(type_class) {
+     return [
+         type_class,
+         this.required_class(),
+         'wpuf_' + this.field.name + '_' + this.form_id
+     ];
+ },
+ class_names: function(type_class) {
+     return this._getBaseClasses(type_class);
+ },
+ builder_class_names: function(type_class) {
+     return [
+         ...this._getBaseClasses(type_class),
+         this._getCommonClasses(type_class)
+     ];
+ },
+ _getCommonClasses: function(type_class) {
+     switch (type_class) {
+         // ... switch cases
+     }
+ }

---

39-52: Consider using a mapping object for switch cases

The switch statement could be replaced with a mapping object to improve maintainability and make it easier to add new field types.

- switch (type_class) {
-     case 'text':
-     case 'url':
-     case 'email':
-     case 'textareafield':
-     case 'textfield':
-     case 'select':
-         commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
-         break;
-     case 'upload_btn':
-         commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary';
-         break;
- }
+ const CLASS_MAPPINGS = {
+     text: 'input',
+     url: 'input',
+     email: 'input',
+     textareafield: 'input',
+     textfield: 'input',
+     select: 'input',
+     upload_btn: 'button'
+ };
+ 
+ const COMMON_CLASSES = {
+     input: 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full',
+     button: 'file-selector wpuf-rounded-md wpuf-btn-secondary'
+ };
+ 
+ commonClasses = COMMON_CLASSES[CLASS_MAPPINGS[type_class]] || '';

---

46-46: Consider extracting Tailwind classes into CSS utility classes

The long strings of Tailwind utility classes could be replaced with custom CSS utility classes to improve maintainability and reduce duplication.

- 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full'
+ 'wpuf-input-base'

- 'file-selector wpuf-rounded-md wpuf-btn-secondary'
+ 'wpuf-upload-btn'

Then define these classes in your CSS:

.wpuf-input-base {
    @apply wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full;
}

.wpuf-upload-btn {
    @apply file-selector wpuf-rounded-md wpuf-btn-secondary;
}

Also applies to: 50-50

includes/Fields/Form_Field_SectionBreak.php (1)

83-92: LGTM: Properties align with form builder redesign

The field properties structure maintains good separation of concerns while accommodating the new UI requirements. The addition of the divider property enhances the section break field's customization options, which aligns well with the form builder redesign objectives.

Consider documenting the available divider options in PHPDoc for better maintainability and developer experience.

includes/Fields/Form_Pro_Upgrade_Fields.php (2)

66-77: Replace WPUF_SINCE placeholder with actual version number

The @SInCE tag contains a placeholder value that should be replaced with the actual version number where this feature is being introduced.

- * @since WPUF_SINCE
+ * @since 4.0.0  // Replace with actual version number

---

84-89: Consider enhancing phone field with international format support

Since this PR is part of a larger UI redesign, consider future enhancements for the phone field:

• International number format validation
• Country code selection
• Integration with phone number validation libraries

This would provide a more robust foundation for international users, including those who might use CFA currency in the future.

includes/Fields/Form_Field_reCaptcha.php (1)

Line range hint 82-89: Consider modernizing the JavaScript implementation.

As part of the UI redesign, consider these improvements:

1. Move the inline JavaScript to a dedicated file for better maintainability
2. Use modern JavaScript features (const/let, arrow functions)
3. Consider using event delegation instead of direct jQuery event binding

Example refactor:

- <script>
-     function wpufRecaptchaCallback(token) {
-         jQuery('[name="g-recaptcha-response"]').val(token);
-         jQuery('.wpuf-submit-button').attr('disabled',false).show();
-         jQuery('.wpuf-submit-btn-recaptcha').hide();
-     }
- </script>
+ <!-- Move to separate .js file -->
+ <script src="<?php echo esc_url( WPUF_ASSET_URI . '/js/recaptcha.js' ); ?>"></script>

In the new JavaScript file:

const wpufRecaptchaCallback = (token) => {
    const $form = document.querySelector('.wpuf-form');
    const $response = $form.querySelector('[name="g-recaptcha-response"]');
    const $submit = $form.querySelector('.wpuf-submit-button');
    const $recaptchaBtn = $form.querySelector('.wpuf-submit-btn-recaptcha');
    
    $response.value = token;
    $submit.disabled = false;
    $submit.style.display = 'block';
    $recaptchaBtn.style.display = 'none';
};

includes/Admin/Forms/Post/Templates/Form_Template.php (1)

Line range hint 1-89: Consider adding documentation for the UI changes.

Given that this is part of a larger UI redesign effort (as mentioned in PR #1503), it would be helpful to:

1. Add PHPDoc comments explaining the UI-related changes and their impact.
2. Document which version of WPUF Pro corresponds to which UI version.
3. Consider adding a changelog entry for this significant UI change.

Gruntfile.js (3)

121-133: Consider the implications of spawn: false.

While spawn: false can improve watch task performance, it might cause issues if the Tailwind compilation takes too long. Consider setting spawn: true if you encounter any task hanging or memory issues.

-                options: {
-                    spawn: false
-                }
+                options: {
+                    spawn: true
+                }

---

246-249: Enhance the Tailwind build command.

The current command lacks error handling and environment-specific optimizations. Consider:

1. Adding NODE_ENV to enable production optimizations
2. Adding error handling for the shell command

             tailwind: {
-                command: function ( input, output ) {
-                    return `npx tailwindcss -i ${input} -o ${output}`;
+                command: function ( input, output ) {
+                    const env = process.env.NODE_ENV || 'development';
+                    return `NODE_ENV=${env} npx tailwindcss -i ${input} -o ${output} || exit 1`;
+                }
             }

---

279-283: Enhance watch event handling.

Consider adding debouncing to prevent multiple rapid executions of the Tailwind task when multiple files change simultaneously.

+    let debounceTimer;
     grunt.event.on('watch', function(action, filepath, target) {
         if (target === 'tailwind') {
-            grunt.task.run('tailwind');
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                grunt.task.run('tailwind');
+            }, 300);
         }
     });

assets/js/wpuf-form-builder-mixins.js (2)

95-119: Enhance robustness and maintainability of the builder_class_names method.

While the implementation works, there are a few areas for improvement:

1. The switch statement could be more explicit about case grouping.
2. Unhandled field types will receive undefined commonClasses.
3. There's some duplication with the existing class_names method.

Consider this refactoring:

 builder_class_names: function(type_class) {
-    var commonClasses = '';
+    var commonClasses = 'wpuf-block'; // Default base class
 
     switch (type_class) {
         case 'text':
         case 'url':
         case 'email':
         case 'textareafield':
         case 'textfield':
         case 'select':
+            // Group similar input fields
             commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
             break;
 
         case 'upload_btn':
             commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary';
             break;
+
+        default:
+            // Log unhandled field type for debugging
+            console.warn('Unhandled field type:', type_class);
+            break;
     }
 
     return [
         type_class,
         this.required_class(),
         'wpuf_' + this.field.name + '_' + this.form_id,
         commonClasses
     ];
 },

---

95-119: Consider documenting the UI styling patterns.

The introduction of Tailwind CSS classes for form styling is a significant architectural change. To ensure consistency across future UI enhancements:

1. Consider creating a style guide documenting the common patterns.
2. Document the mapping between field types and their corresponding styles.
3. Consider extracting common class combinations into reusable constants or helper functions.

admin/form-builder/assets/js/components/form-column_field/index.js (2)

122-125: Consider enhancing the action button styling implementation

While the addition of hover effects is aligned with the UI redesign, the current implementation could be improved:

1. The class string is hardcoded and might be better managed through a configuration object
2. The hover effects are limited to cursor and text color

Consider this more maintainable approach:

- action_button_classes: function() {
-     return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
- }
+ action_button_classes: function() {
+     return {
+         base: 'wpuf-action-button',
+         hover: [
+             'hover:wpuf-cursor-pointer',
+             'hover:wpuf-text-white',
+             'hover:wpuf-bg-opacity-90'
+         ].join(' ')
+     };
+ }

This approach:

• Separates base and hover states
• Makes it easier to add/modify classes
• Improves maintainability

---

122-125: Consider enhancing drag-and-drop visual feedback

Since this component heavily relies on drag-and-drop interactions, consider extending the new styling to improve visual feedback during these operations.

Suggestions:

1. Add transition effects for smoother hover states
2. Include visual feedback for drag operations
3. Consider adding active states for better interaction feedback

Example implementation:

action_button_classes: function() {
-    return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
+    return [
+        'hover:wpuf-cursor-pointer hover:wpuf-text-white',
+        'transition-colors duration-200',
+        'active:wpuf-scale-95',
+        'wpuf-drag-handle:wpuf-bg-gray-100'
+    ].join(' ');
}

includes/Assets.php (1)

155-157: Consider adding version and dependencies for admin-form-builder style

For consistency with other admin styles and better cache management:

 'admin-form-builder'  => [
     'src' => WPUF_ASSET_URI . '/css/admin/form-builder.css',
+    'version' => WPUF_VERSION,
+    'deps' => ['wpuf-admin']
 ],

includes/Admin/Forms/Admin_Form.php (3)

199-219: Maintain consistent class structure across tab content sections

The tab content sections have inconsistent class structures:

• Most sections only have group class
• The post expiration section has additional wpuf-mt-4 class

Consider standardizing the spacing and layout across all sections by applying consistent Tailwind classes:

-<div v-show="active_settings_tab === '#wpuf-metabox-settings'" id="wpuf-metabox-settings" class="group">
+<div v-show="active_settings_tab === '#wpuf-metabox-settings'" id="wpuf-metabox-settings" class="group wpuf-mt-4">

Apply similar changes to other sections for consistent spacing.

---

237-254: Reduce duplication in tab class bindings

The tab navigation items have repetitive class binding logic that could be simplified.

Consider creating a computed property or method for the active class binding:

+// Add to your Vue component
+methods: {
+  getTabClass(tabId) {
+    return {
+      'nav-tab-active': this.active_settings_tab === tabId
+    }
+  }
+}

-<a href="#wpuf-metabox-settings"
-   :class="active_settings_tab === '#wpuf-metabox-settings' ? 'nav-tab-active' : ''"
+<a href="#wpuf-metabox-settings"
+   :class="getTabClass('#wpuf-metabox-settings')"
    class="nav-tab">

---

Line range hint 199-292: Overall implementation feedback

The Vue.js integration for tab management is well-implemented, but there are some architectural considerations:

1. The mixing of styling approaches (Tailwind CSS vs. traditional CSS) could lead to maintenance challenges
2. The tab management logic is scattered across different sections
3. The class structures are inconsistent between different tab sections

Consider:

1. Creating a dedicated Vue component for tab management to encapsulate the logic
2. Standardizing the styling approach across all tabs
3. Moving the tab-related computed properties and methods into a shared mixin

This will improve maintainability and make future UI updates more manageable.

includes/Admin/Posting.php (2)

25-25: Remove commented-out code above this line

The commented-out line // add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_script'] ); should be removed as it adds noise to the codebase.

---

32-44: Update the @SInCE tag with actual version number

The @SInCE tag uses a placeholder WPUF_SINCE which should be replaced with the actual version number.

Consider adding error handling for undefined constant

The code assumes WPUF_PRO_VERSION is defined when used in the version comparison. Consider adding a safeguard:

-        if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.13', '<' ) ) {
+        if ( defined( 'WPUF_PRO_VERSION' ) && WPUF_PRO_VERSION !== false && version_compare( WPUF_PRO_VERSION, '4.0.13', '<' ) ) {

admin/form-builder/assets/js/form-builder.js (2)

494-503: Consider using async/await for better readability

The timeout-based tooltip management could be refactored to use modern async/await syntax for better readability and maintenance.

-setTimeout(function() {
-    $(e.trigger).tooltip('hide')
-    .attr('data-original-title', self.i18n.copy_shortcode);
-    self.shortcodeCopied = false;
-}, 1000);
+const resetTooltip = async (trigger) => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    $(trigger).tooltip('hide')
+        .attr('data-original-title', self.i18n.copy_shortcode);
+    self.shortcodeCopied = false;
+};
+resetTooltip(e.trigger);

---

893-897: Remove commented code

The commented resize functionality should be either implemented or removed entirely. Commented code adds noise and can become outdated.

-// resizeBuilderContainer();
-//
-// $("#collapse-menu").click(function () {
-//     resizeBuilderContainer();
-// });

assets/js/wpuf-form-builder.js (4)

456-456: Consider optimizing the meta_field_key computed property

The current implementation creates unnecessary array allocations. Consider using Array.prototype.reduce for better performance.

- return meta_key.map(function(name) { return '{' + name +'}' }).join( );
+ return meta_key.reduce(function(acc, name) { 
+   return acc + '{' + name + '}';
+ }, '');

---

494-503: Improve tooltip state management

The tooltip state management could be improved by using Vue's reactivity system instead of direct DOM manipulation.

- $(e.trigger)
-   .attr('data-original-title', 'Shortcode copied!')
-   .tooltip('show');
+ this.tooltipText = 'Shortcode copied!';
+ this.$nextTick(() => {
+   $(e.trigger).tooltip('show');
+ });

setTimeout(function() {
-   $(e.trigger).tooltip('hide')
-   .attr('data-original-title', self.i18n.copy_shortcode);
+   self.tooltipText = self.i18n.copy_shortcode;
+   $(e.trigger).tooltip('hide');
    self.shortcodeCopied = false;
}, 1000);

---

893-897: Remove commented code

The commented-out code for resizing the builder container should be removed as it's no longer needed. If this functionality needs to be preserved for future reference, consider moving it to documentation.

- // resizeBuilderContainer();
- //
- // $("#collapse-menu").click(function () {
- //     resizeBuilderContainer();
- // });

---

Line range hint 1-924: Consider splitting the file into smaller modules

The file is quite large (924 lines) and handles multiple responsibilities. Consider splitting it into smaller, more focused modules:

• Form builder core
• Settings management
• Clipboard operations
• Event handlers

This would improve maintainability and make the code easier to test.

assets/js/wpuf-form-builder-components.js (1)

926-929: LGTM! Consider using Tailwind's @apply directive.

The computed property correctly implements hover states for action buttons using Tailwind CSS classes. However, for better maintainability and reusability, consider extracting these classes using Tailwind's @apply directive in your CSS.

- action_button_classes: function() {
-   return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
- }
+ action_button_classes: function() {
+   return 'action-button'; // Use a semantic class name
+ }

Then in your CSS:

.action-button {
  @apply hover:wpuf-cursor-pointer hover:wpuf-text-white;
}

languages/wp-user-frontend.pot (3)

206-209: Consider consolidating duplicate Pro Version strings.

The string "is available in Pro Version" appears in multiple template locations. Consider using a single translation string reference to maintain consistency across translations.

-#: admin/form-builder/assets/js/components/builder-stage/template.php:43
-#: admin/form-builder/assets/js/components/form-column_field/template.php:52
-#: assets/js-templates/form-components.php:44
-#: assets/js-templates/form-components.php:642
msgid "is available in Pro Version"
msgstr ""

---

213-214: Consider consolidating duplicate Hidden Fields strings.

The string "Hidden Fields" appears in multiple locations. Consider using a single translation string reference to maintain consistency.

-#: admin/form-builder/assets/js/components/builder-stage/template.php:120
-#: assets/js-templates/form-components.php:121
msgid "Hidden Fields"
msgstr ""

---

218-219: Consider consolidating duplicate key/value field labels.

The strings "key" and "value" appear in multiple locations. Consider using single translation string references to maintain consistency.

-#: admin/form-builder/assets/js/components/builder-stage/template.php:129
-#: assets/js-templates/form-components.php:130
msgid "key"
msgstr ""

-#: admin/form-builder/assets/js/components/builder-stage/template.php:130
-#: assets/js-templates/form-components.php:131
msgid "value"
msgstr ""

Also applies to: 223-224

admin/form-builder/assets/js/components/form-column_field/template.php (2)

51-52: Avoid mixing PHP code within Vue.js templates

Embedding PHP code (<?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?>) within a Vue.js template can make the code harder to read and maintain. Consider handling localization and translations within your JavaScript code or separating the PHP logic from the Vue.js template to improve code clarity and maintainability.

---

61-92: Refactor control buttons to reduce code duplication

The code for the control buttons between lines 61-78 and 79-92 is largely duplicated, differing mainly based on the condition !is_failed_to_validate(field.template). Refactoring this section can eliminate redundancy. Consider extracting common parts into a separate component or using computed properties to handle conditional rendering more efficiently.

admin/form-builder/assets/js/components/builder-stage/template.php (1)

54-110: Refactor duplicated 'control-buttons' code into a reusable component

The 'control-buttons' sections in lines 54-110 and 133-186 are nearly identical. Extracting this repeated code into a reusable component would improve maintainability and reduce duplication.

Also applies to: 133-186

admin/form-builder/views/form-builder.php (2)

130-145: Accessibility Improvement for Toggle Button

The toggle button for "Enable Multistep" may not be fully accessible:

• ARIA Attributes: Ensure that aria-checked is dynamically updated based on the enableMultistep state.
• Keyboard Navigation: Verify that the button is focusable and operable via keyboard inputs.
• Screen Reader Support: Confirm that screen readers correctly interpret the toggle functionality.

Apply the following changes:

- aria-checked="false">
+ :aria-checked="enableMultistep.toString()">

And ensure the button can be focused and activated using the keyboard.

---

153-155: Implement Field Attributes Panel

The placeholder text "Field attributes" suggests that the field attributes panel is not yet implemented.

Would you like assistance in implementing the field attributes panel? I can help provide a basic structure or open a GitHub issue to track this enhancement.

assets/js-templates/form-components.php (2)

58-75: Refactor duplicated control button code into a reusable component

The control button code in lines 58-75, 136-150, and 651-666 is duplicated across multiple templates. This repetition can lead to maintenance challenges and increase the potential for inconsistencies. By extracting this code into a reusable Vue component, you can improve maintainability, promote code reuse, and adhere to the DRY (Don't Repeat Yourself) principle.

Also applies to: 136-150, 651-666

---

107-110: Optimize repeated SVG icons by creating a separate component

The SVG icon for the "Pro Version" notice is repeated in lines 107-110, 182-185, and 699-702. Embedding the same SVG inline multiple times can impact performance and makes updates more cumbersome. Consider creating a separate Vue component for the SVG icon or importing it as an asset. This approach will enhance performance by reducing redundancy and make future updates easier.

Also applies to: 182-185, 699-702

wpuf-functions.php (4)

Line range hint 1437-1449: Add user existence check in wpuf_user_has_roles function

To prevent potential errors when the user does not exist or is invalid, ensure that $user is a valid WP_User object before accessing its properties.

Apply this diff to add the necessary check:

 function wpuf_user_has_roles( $roles, $user_id = 0 ) {
     if ( empty( $roles ) ) {
         return false;
     }

     $user = $user_id ? get_userdata( $user_id ) : wp_get_current_user();

+    if ( ! ( $user instanceof WP_User ) ) {
+        return false;
+    }

     if ( ! empty( array_intersect( $user->roles, $roles ) ) ) {
         return true;
     }

     return false;
 }

---

Line range hint 1450-1466: Add null check for post retrieval in wpuf_frontend_post_revision

Ensure that $post is not null before proceeding to avoid potential errors if the post cannot be retrieved.

Apply this diff to include the null check:

 function wpuf_frontend_post_revision( $post_id, $form_settings ) {
     $post      = get_post( $post_id );

+    if ( ! $post ) {
+        return;
+    }

     $post_type = ! empty( $form_settings['post_type'] ) ? $form_settings['post_type'] : 'post';

     if ( post_type_supports( $post_type, 'revisions' ) ) {
         $revisions = wp_get_post_revisions(
             $post_id, [
                 'order' => 'ASC',
                 'posts_per_page' => 1,
             ]
         );
         $revision  = current( $revisions );

         _wp_upgrade_revisions_of_post( $post, wp_get_post_revisions( $post_id ) );
     }
 }

---

Line range hint 1469-1495: Prevent division by zero in wpuf_pagination when $per_page is zero

If $per_page is zero, dividing $total_items by $per_page will cause a division by zero error. Add a check to ensure $per_page is greater than zero.

Apply this diff to handle the zero case:

 function wpuf_pagination( $total_items, $per_page, $pagination_args = [] ) {
+    if ( $per_page <= 0 ) {
+        return '';
+    }

     $pagenum = isset( $_GET['pagenum'] ) ? absint( $_GET['pagenum'] ) : 1;
     $num_of_pages = ceil( $total_items / $per_page );

---

Line range hint 1485-1487: Typo in function documentation: 'weight' should be 'width'

The function's doc comment incorrectly mentions 'height and weight' instead of 'height and width'.

Apply this diff to correct the typo:

 /**
- * Get an array of available image sizes with height and weight
+ * Get an array of available image sizes with height and width
  *
  * @since 3.5.27
  *

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Search for the implementation and usage of both action hooks

echo "Checking implementations of action hooks:"
rg -A 5 "add_action.*wpuf_admin_form_builder(_view)?"

echo "\nChecking all usages of action hooks:"
rg "do_action.*wpuf_admin_form_builder(_view)?"

#!/bin/bash
# Description: Check for other version-dependent code paths

echo "Checking for other version comparisons:"
rg "version_compare.*WPUF_PRO_VERSION.*4\.0\.12"

echo "\nChecking for upgrade-related code:"
rg -g "!*.{md,txt}" -i "upgrade|migration"

#!/bin/bash
# Search for the definition of builder_class_names method
ast-grep --pattern 'builder_class_names($$$)' 

# Backup: Search for any file containing builder_class_names
rg -l "builder_class_names"

#!/bin/bash
# Search for the definition in form-field mixin
rg -A 5 "builder_class_names" "admin/form-builder/assets/js/mixins/form-field.js"

# Also check the other mixin file found
rg -A 5 "builder_class_names" "assets/js/wpuf-form-builder-mixins.js"

#!/bin/bash
# Get the full implementation of builder_class_names method
rg -A 20 "builder_class_names: function" "assets/js/wpuf-form-builder-mixins.js"
rg -A 20 "builder_class_names: function" "admin/form-builder/assets/js/mixins/form-field.js"

#!/bin/bash
# Search for the builder_class_names method definition and its usage
ast-grep --pattern 'builder_class_names'

# Search for any related mixins or utility files
rg -g '*.{js,vue,php}' -A 5 'builder_class_names'

#!/bin/bash
# Description: Look for design-related files and specifications
# Expected results: Find design files or documentation related to issue #651

# Search for design files
echo "Searching for design files..."
fd -e fig -e sketch -e xd -e psd

# Search for design documentation
echo "Searching for design documentation..."
rg -l "design|specification|UI|UX" -g "*.md"

# Search for related components using similar styling
echo "Searching for related components..."
rg -l "wpuf-rounded-md.*wpuf-shadow-sm.*wpuf-text-gray-900" --type php

#!/bin/bash
# Let's search for related UI components and styling patterns

# Search for files with similar Tailwind classes
echo "Searching for similar Tailwind styling patterns..."
rg "wpuf-(rounded-md|shadow-sm|text-gray-900|border-gray-300)" --type php -l

# Look for any UI/design related documentation in the form-builder directory
echo "Searching for design documentation in form-builder..."
rg -l "design|UI|styling" admin/form-builder/

# Check for other template files in the form-builder components
echo "Listing form builder component templates..."
fd template.php admin/form-builder/

# Search for related PRs or issues mentioned in commit messages
echo "Searching for related PR mentions..."
git log --grep="#1503" --oneline

#!/bin/bash
# Description: Verify the builder_class_names method exists and is consistently used
# Search for the method definition and its usage across components

# Check for method definition
echo "Searching for builder_class_names method definition:"
ast-grep --pattern 'builder_class_names' -A 5

# Check for consistent usage across components
echo "\nChecking usage consistency across form field components:"
rg "class_names|builder_class_names" "admin/form-builder/assets/js/components/"

#!/bin/bash
# Search for the implementation of both class_names and builder_class_names methods
echo "Searching for class methods implementation:"
rg -A 5 "class_names.*=|builder_class_names.*=" "admin/form-builder/assets/js/"

# Check for any mixins that might contain these methods
echo "\nSearching in mixins:"
fd "mixin" "admin/form-builder/assets/js/" --exec rg -l "class_names"

#!/bin/bash
# Check the implementation in the form-field mixin
echo "Checking form-field mixin implementation:"
cat "admin/form-builder/assets/js/mixins/form-field.js"

     content: [
         './assets/**/*.{js,jsx,ts,tsx,vue,html}',
         './includes/Admin/views/*.php',
         './admin/form-builder/views/*.php',
-        './admin/form-builder/assets/js/**/*.php',
+        './admin/form-builder/assets/js/**/*.{js,jsx,ts,tsx,vue}',
     ],

#!/bin/bash
# Check file types in the js directory
fd . "admin/form-builder/assets/js" -t f -x file {}

#!/bin/bash
# Let's try a simpler approach to check what files exist in the js directory
fd . "admin/form-builder/assets/js" -t f -x echo {}

#!/bin/bash
# Also check if there are any PHP files in this directory
rg -g "admin/form-builder/assets/js/**/*.php" "." -l || echo "No PHP files found"

#!/bin/bash
# Check for JavaScript files in this directory
rg -g "admin/form-builder/assets/js/**/*.{js,jsx,ts,tsx}" "." -l || echo "No JavaScript files found"

     extend: {
         colors: {
-            primary: '#166534',
-            primaryHover: '#15803d',
+            primary: {
+                DEFAULT: '#166534',
+                light: '#15803d',
+                dark: '#14532d'
+            }
         }
     },

#!/bin/bash
# Description: Check for consistent styling patterns across form components

# Check for similar styling patterns in other form components
rg -l "wpuf-(block|w-full|rounded-md)" "admin/form-builder/assets/js/components/"

# Check for help text implementation
rg "wpuf-text-gray-500.*field\.help" "admin/form-builder/assets/js/components/"

#!/bin/bash
# Check if field.help content is sanitized before storage
rg -A 5 "field\.help\s*=" 

#!/bin/bash
# Let's try a broader search for help field initialization and assignments
rg -A 5 "help.*[:=]" --type php --type js

# Also search for sanitization functions or methods related to help text
rg -B 2 -A 2 "sanitize|esc_" --type php

# Check form field definitions and schemas
ast-grep --pattern 'field: {
  $$$
  help: $_,
  $$$
}'

#!/bin/bash
# Let's check how field.help is populated and if there's any sanitization
rg -B 2 -A 2 "field\['help'\]|field\.help" --type php

# Also check for any sanitization functions specifically used with help text
rg -B 2 -A 2 "sanitize.*help|esc_.*help" --type php

# Look for form field initialization to see how help text is processed
ast-grep --pattern 'field = {
  $$$
  help: $_, 
  $$$
}'

#!/bin/bash
# Description: Check for inconsistent button styling patterns across upload components
# Look for other upload button implementations that might need similar updates

# Search for upload button patterns in template files
rg -t php 'class="[^"]*(?:file-selector|button)[^"]*"' admin/form-builder/assets/js/components/

#!/bin/bash
# Search for upload-related components and their button styling
rg -t php -A 2 ':class="[^"]*upload|<a[^>]*upload' admin/form-builder/assets/js/components/

#!/bin/bash
# Search for builder_class_names implementation
ast-grep --pattern 'builder_class_names' -A 10

#!/bin/bash
# Search for builder_class_names in JS files
rg -t js "builder_class_names.*=.*function" admin/form-builder/assets/js/

#!/bin/bash
# Search for help text sanitization in the codebase
rg -A 5 "field\.help\s*=" 

#!/bin/bash
# Let's try a broader search for field help text handling
rg -i "help.*field" -A 5

# Also search for sanitization functions or utilities
rg -i "sanitize|escape" -A 5

# Look for form field definitions that might set help text
ast-grep --pattern 'field = {
  $$$
  help: $_,
  $$$
}'

#!/bin/bash
# Search for sanitization in the get_term_dropdown_options implementation
ast-grep --pattern 'get_term_dropdown_options() {
  $$$
}'

# Look for sanitization functions usage
rg -A 5 "sanitize|esc_html|wp_kses"

#!/bin/bash
# Search for get_term_dropdown_options implementation
ast-grep --pattern 'get_term_dropdown_options() {
  $$$
}'

# Also search for any file containing this method name
rg "get_term_dropdown_options"

#!/bin/bash
# Get the full implementation of get_term_dropdown_options and related methods
cat admin/form-builder/assets/js/components/form-taxonomy/index.js

#!/bin/bash
# Description: Check for consistent styling patterns across form field components

# Look for similar Tailwind classes in other form field templates
rg -l "wpuf-text-indigo-600|wpuf-border-gray-300" "admin/form-builder/assets/js/components/"

# Check for consistent help text styling
rg "wpuf-text-sm wpuf-text-gray-500" "admin/form-builder/assets/js/components/"

#!/bin/bash
# Check latest versions and compatibility
npm view grunt-postcss versions --json | jq -r '.[-1]'
npm view [email protected] peerDependencies --json

#!/bin/bash
# Check PostCSS version and other related dependencies
rg "postcss" package.json -A 2 -B 2

# Check if there are any PostCSS config files
fd -e js -e config.js -e json -g "*postcss*"

# Check if there are any Grunt configuration files that use postcss
fd -e js -g "Gruntfile*"

#!/bin/bash
# Check the Gruntfile.js for postcss configuration
cat Gruntfile.js | grep -A 10 -B 10 "postcss"

# Check postcss config
cat postcss.config.js

#!/bin/bash
# Search for usage of the divider property in template files
rg -t php -t js "divider.*regular" 

# Search for any conditional rendering based on divider property
ast-grep --pattern 'if ($$$divider$$$) { $$$ }'

#!/bin/bash
# Let's check for all possible usages of divider property in templates and JS files
rg -t php -t js "field\.divider" -A 2

# Also check for any divider-related CSS classes or styles
rg -t css -t scss "divider"

# Check for any other section break field properties
rg -t php "Form_Field_SectionBreak" -A 10

#!/bin/bash
# Description: Check if other form field classes implement is_full_width()
# Expected: Find similar implementations in other field classes

ast-grep --pattern 'class Form_Field_$_ extends Field_Contract {
  $$$
  public function is_full_width() {
    $$$
  }
  $$$
}'

#!/bin/bash
# Let's try a different approach to find form field classes and their width-related methods
# First, find all form field classes
fd "Form_Field_.*\.php" includes/Fields/

# Then, let's search for any width-related methods or properties
rg -l "width|full|responsive" includes/Fields/

#!/bin/bash
# Let's check the Field_Contract.php for any base implementation and other field classes for similar methods
rg -A 3 "is_full_width|width|full" includes/Fields/Field_Contract.php

# Also check a few specific field classes that might have similar implementations
rg -A 3 "is_full_width|function.*width" includes/Fields/Form_Field_SectionBreak.php includes/Fields/Form_Field_Column.php includes/Fields/Form_Field_HTML.php

#!/bin/bash
# Description: Look for capability checks in the codebase

# Search for common capability check patterns
echo "Checking for capability verifications..."
rg "current_user_can|check_ajax_referer|wp_verify_nonce" --type php

# Specifically look for checks in form-related files
echo -e "\nChecking form-related files..."
fd -e php -x rg "current_user_can" {} \; | grep -i "form"

#!/bin/bash
# Let's check for capability checks specifically in the Form_Template class and its related files

# Check Form_Template class and its parent/child classes
echo "Checking Form_Template class and related files..."
ast-grep --pattern 'class Form_Template {
  $$$
  should_display() {
    $$$
  }
  $$$
}'

# Check for capability checks in the form template directory
echo -e "\nChecking capability checks in form template files..."
fd -e php -p "Templates/Form_Template" -x rg "current_user_can|check_ajax_referer|wp_verify_nonce" {} \;

# Check if there are any admin menu registrations that might handle capability checks
echo -e "\nChecking admin menu registrations..."
rg "add_menu_page|add_submenu_page" --type php | grep -i "form"

#!/bin/bash
# Let's check how the admin menu capability is set and enforced

# Check the Menu class implementation
echo "Checking Menu class implementation..."
rg -A 10 "class Menu" includes/Admin/Menu.php

# Check how the capability is defined and used
echo -e "\nChecking capability definition and usage..."
rg "capability.*=|wpuf_admin_role" --type php

# Check if there are any hooks that might be setting/checking capabilities
echo -e "\nChecking capability-related hooks..."
rg "add_action.*capability|add_filter.*capability" --type php

#!/bin/bash
# Description: Check for other PHP files that might need Tailwind CSS processing

# Find all PHP files in relevant directories
echo "PHP files in admin/form-builder/views/:"
fd -e php . admin/form-builder/views/

echo -e "\nPHP files containing Tailwind classes:"
rg -l "class=\"[^\"]*tw-" -g "*.php"

#!/bin/bash
# Let's check the content of form-builder.php to see if it actually uses Tailwind classes
# and verify if form-builder-old.php might need similar processing

echo "Checking form-builder.php for Tailwind classes:"
rg "class=\"[^\"]*" admin/form-builder/views/form-builder.php

echo -e "\nChecking form-builder-old.php for similar styling patterns:"
rg "class=\"[^\"]*" admin/form-builder/views/form-builder-old.php

# Also check if there are any CSS imports or style references in these files
echo -e "\nChecking for style/CSS references:"
rg -i "style|css" admin/form-builder/views/form-builder.php
rg -i "style|css" admin/form-builder/views/form-builder-old.php

#!/bin/bash
# Search for both hooks to understand their usage
echo "Searching for wpuf_admin_form_builder hook..."
rg "do_action\(\s*['\"]wpuf_admin_form_builder['\"]" -A 2

echo "Searching for wpuf_admin_form_builder_view hook..."
rg "do_action\(\s*['\"]wpuf_admin_form_builder_view['\"]" -A 2

#!/bin/bash
# Get the full context of the template file
echo "Content of post-form.php:"
cat includes/Admin/views/post-form.php

#!/bin/bash
# Description: Check for potential styling conflicts with resize functionality

# Look for other files that might be affected by the new styling
rg -l "wpuf-cursor-pointer|wpuf-text-white" --type js --type vue

# Check for any existing cursor-related styles that might conflict
rg "cursor-\w+" --type css

#!/bin/bash
# Let's check for resize-related functionality and cursor styles in the component
rg -A 5 -B 5 "resize|draggable|drag" admin/form-builder/assets/js/components/form-column_field/

# Check if there are any other components using these styles
rg "action_button_classes|wpuf-cursor-pointer" admin/form-builder/assets/js/components/

#!/bin/bash
# Description: Verify the existence and content of the new form builder CSS file
# and check for any related template files that might need style updates.

# Check if the new CSS file exists and has content
echo "Checking form-builder.css..."
cat "assets/css/admin/form-builder.css" 2>/dev/null || echo "Warning: form-builder.css not found"

# Look for related template files that might need style updates
echo -e "\nChecking related template files..."
fd -e php -e html . | rg -l "form-builder|stage|post-form"

# Check for form builder template files and their style references
fd -e php . | rg -l "admin-form-builder" -A 2

#!/bin/bash
# Check for form builder style enqueuing and template usage
echo "Checking style registration in PHP files..."
rg -l "admin-form-builder" --type php

echo -e "\nChecking form builder template files..."
fd -e php . | rg -l "form-builder|wpuf-form-builder"

echo -e "\nChecking style dependencies..."
rg "admin-form-builder" --type php -C 2

#!/bin/bash
# Description: Verify that all usages of 'post.ID' in URLs are properly escaped.

# Search for lines where 'post.ID' is used within href attributes.
rg '<a[^>]+href=.*post\.ID' -A 2

# Expected result: All instances should use proper escaping functions or be within Vue.js bindings that handle data safely.

#!/bin/bash
# Check for Vue component definitions and data handling related to post.ID
ast-grep --pattern 'data() {
  $$$
  post: $$$
  $$$
}'

# Check for any sanitization or processing of post.ID
rg "post\.ID" -B 2 -A 2

# Check if there's any Vue mixin or component that handles URL sanitization
fd -e js -e vue | xargs rg "preview.*url" -i

#!/bin/bash
# Search for the definition and usage of get_wpuf_preview_page function
rg "function get_wpuf_preview_page" -B 2 -A 5

# Search for any sanitization of form_id parameter in preview page handling
rg "wpuf_preview.*form_id" -B 2 -A 2

# Check if there's any validation of post ID before preview
rg "function.*preview" -A 5

#!/bin/bash
# Description: Search for usages of 'wpuf_auth_keys' in the codebase.

# Find all occurrences where 'wpuf_auth_keys' is used with get_option, update_option, or delete_option.
rg "get_option\(['\"]wpuf_auth_keys['\"]" -tphp
rg "update_option\(['\"]wpuf_auth_keys['\"]" -tphp
rg "delete_option\(['\"]wpuf_auth_keys['\"]" -tphp

#!/bin/bash
# Let's try a broader search for 'wpuf_auth_keys' without limiting to specific function calls
rg "wpuf_auth_keys" -tphp

# Also search for any encryption-related functions that might be using these keys
ast-grep --pattern 'function wpuf_encryption($_) { $$$ }'

#!/bin/bash
# Let's examine the Encryption_Helper.php file to understand the key management logic
rg -A 10 "wpuf_auth_keys" includes/Encryption_Helper.php

# Also check for any other encryption/decryption methods that might be using these keys
ast-grep --pattern 'function $_($$) { 
  $$$ 
  sodium_crypto_secretbox($$$)
  $$$ 
}'

admin/form-builder/assets/js/components/form-column_field/template.php (2)

101-113: Add Accessible Text for SVG Icon Links

The <a> tag wrapping the SVG icon lacks accessible text, which can hinder screen reader users.

Add an aria-label to the <a> tag to improve accessibility:

<a
    :href="pro_link"
    target="_blank"
+   aria-label="Upgrade to Pro"
    class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-transition wpuf-duration-150 wpuf-ease-out hover:wpuf-transition-all">

---

55-55: Handle Undefined Components Gracefully

When using dynamic components like <component :is="'form-' + field.template">, there's a possibility that the component may not exist, leading to runtime errors.

Consider adding a fallback or error component to handle cases where field.template does not correspond to a registered component:

<component
    v-if="is_template_available(field)"
    :is="'form-' + field.template"
    :field="field">
</component>
<!-- Fallback component -->
<div v-else class="wpuf-text-red-500">
    Component {{ 'form-' + field.template }} not found.
</div>

Also applies to: 44-47

admin/form-builder/views/form-builder.php (1)

126-126: Use Underscores in Hook Names Instead of Dashes

At lines 126, 163, 170, and 174, the hook names use dashes (-) instead of underscores (_). According to WordPress coding standards, hook names should use underscores to separate words for consistency and readability.

Apply this diff to update the hook names:

- <?php do_action( "wpuf-form-builder-tabs-{$form_type}" ); ?>
+ <?php do_action( "wpuf_form_builder_tabs_{$form_type}" ); ?>

- <?php do_action( "wpuf-form-builder-settings-tabs-{$form_type}" ); ?>
+ <?php do_action( "wpuf_form_builder_settings_tabs_{$form_type}" ); ?>

- <?php do_action( "wpuf-form-builder-settings-tab-contents-{$form_type}" ); ?>
+ <?php do_action( "wpuf_form_builder_settings_tab_contents_{$form_type}" ); ?>

- <?php do_action( "wpuf-form-builder-tab-contents-{$form_type}" ); ?>
+ <?php do_action( "wpuf_form_builder_tab_contents_{$form_type}" ); ?>

Also applies to: 163-163, 170-170, 174-174

🧰 Tools

🪛 GitHub Check: Run PHPCS inspection

[warning] 126-126:
Words in hook names should be separated using underscores. Expected: "wpuf_form_builder_tabs_{$form_type}", but found: "wpuf-form-builder-tabs-{$form_type}".

includes/Admin/views/post-form.php (1)

1-11: Ensure proper error handling for undefined constants

While the code checks if WPUF_PRO_VERSION is defined, it might be good to add error logging for debugging purposes.

Consider adding debug logging:

 <?php
+if ( ! defined( 'WPUF_PRO_VERSION' ) && defined( 'WP_DEBUG' ) && WP_DEBUG ) {
+    error_log( 'WPUF_PRO_VERSION is not defined in post-form.php' );
+}
 if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.12', '<' ) ) {

admin/form-builder/assets/js/components/form-post_title/template.php (1)

7-8: Review class binding approach to prevent conflicts.

The current implementation mixes dynamic class binding (:class) with static classes, which could lead to conflicts or overrides. Consider consolidating all classes through the class_names helper for better maintainability.

-:class="class_names('textfield')"
-class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+:class="class_names('textfield', [
+  'wpuf-block',
+  'wpuf-w-full',
+  'wpuf-rounded-md',
+  'wpuf-py-1.5',
+  'wpuf-text-gray-900',
+  'wpuf-shadow-sm',
+  'placeholder:wpuf-text-gray-400',
+  'sm:wpuf-text-sm',
+  'sm:wpuf-leading-6',
+  'wpuf-border',
+  '!wpuf-border-gray-300'
+])"

admin/form-builder/assets/js/components/form-recaptcha/template.php (1)

8-8: LGTM! Consider enforcing strict equality checks project-wide.

The change to use strict equality (!==) is a good practice for type safety.

Consider using ESLint with the eqeqeq rule to enforce strict equality checks (=== and !==) throughout the project for consistency.

admin/form-builder/assets/js/components/form-post_excerpt/template.php (1)

5-5: Consider extracting common Tailwind classes into a reusable class.

The textarea styling includes multiple utility classes that might be reused across other form elements. Consider creating a reusable class in your CSS to maintain consistency and reduce duplication.

Example approach:

.wpuf-form-input {
  @apply wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm wpuf-border wpuf-border-gray-300;
}

Then use it as:

-class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+class="wpuf-form-input placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6"

admin/form-builder/assets/js/components/form-dropdown_field/template.php (1)

4-4: Consider optimizing Tailwind CSS classes

The styling looks good, but there's some redundancy in the width-related classes:

• wpuf-w-full and wpuf-min-w-full are potentially redundant
• The ! important flag on the border color might indicate a specificity issue

Consider this optimization:

-class="wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300"
+class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border wpuf-border-gray-300"

admin/form-builder/assets/js/components/form-section_break/template.php (3)

1-1: LGTM! Consider adding ARIA role for better accessibility

The root container structure is clean, but could benefit from accessibility improvements.

-<div class="wpuf-fields">
+<div class="wpuf-fields" role="region" aria-label="Form Section">

---

2-8: Consider using semantic HTML elements for the regular section

While the implementation is functional, using more semantic HTML elements would improve accessibility and SEO.

 <div
     v-if="!field.divider || field.divider === 'regular'"
     class="wpuf-section-wrap">
-    <h2 class="wpuf-section-title">{{ field.label }}</h2>
-    <div class="wpuf-section-details">{{ field.description }}</div>
+    <header>
+        <h2 class="wpuf-section-title">{{ field.label }}</h2>
+        <p class="wpuf-section-details">{{ field.description }}</p>
+    </header>
     <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-full"></div>
 </div>

---

9-18: Maintain consistent class naming convention

The implementation mixes traditional class names (wpuf-*) with Tailwind CSS classes. Consider standardizing the approach.

 <div
     v-else-if="field.divider === 'dashed'"
     class="wpuf-section-wrap">
     <div class="wpuf-flex wpuf-items-center wpuf-justify-between">
         <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-2/5"></div>
-        <div class="wpuf-section-title wpuf-text-base text-gray-900 wpuf-px-3 wpuf-font-semibold">{{ field.label }}</div>
+        <div class="wpuf-section-title wpuf-text-base wpuf-text-gray-900 wpuf-px-3 wpuf-font-semibold">{{ field.label }}</div>
         <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-2/5"></div>
     </div>
     <div class="wpuf-section-details wpuf-text-gray-400 wpuf-text-center wpuf-mt-2">{{ field.description }}</div>
 </div>

admin/form-builder/assets/js/components/form-featured_image/template.php (1)

10-12: Consider extracting the SVG icon for reusability.

The SVG icon implementation is good, but consider extracting it into a reusable component if this icon is used elsewhere in the form builder.

-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wpuf-size-5">
-    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
-</svg>
+<wpuf-icon name="image" class="wpuf-size-5" />

admin/form-builder/assets/js/components/form-image_upload/template.php (2)

8-10: Consider adding accessibility attributes to the SVG icon

While the SVG implementation is clean, consider adding ARIA attributes for better accessibility.

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5" 
+    aria-hidden="true" role="img" aria-label="Upload image">

---

14-16: Consider extracting the duplicated SVG into a reusable component

The SVG icon is duplicated between the default and custom label states. Consider extracting it into a reusable component or template.

Example approach:

<!-- Create a new component: upload-icon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5" aria-hidden="true">
    <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
  </svg>
</template>

admin/form-builder/assets/js/components/form-taxonomy/template.php (2)

21-21: Differentiate styles for multiple select

Consider using a different parameter for builder_class_names() to distinguish multiple select styling from single select (e.g., builder_class_names('multiselect')).

---

Line range hint 1-46: Enhance form accessibility

Consider adding the following accessibility improvements:

1. ARIA labels for form controls
2. Error message handling with aria-invalid and aria-errormessage
3. Focus management for the AJAX select

package.json (1)

Line range hint 13-14: Consider updating package versions for better security and features.

Some packages could be updated to their latest versions:

• tailwindcss current: ^3.3.5, latest: 3.4.1
• postcss current: ^8.4.31, latest: 8.4.35
• autoprefixer current: ^10.4.16, latest: 10.4.19

Also applies to: 38-41

admin/form-builder/assets/js/components/form-checkbox_field/template.php (2)

2-18: LGTM! Consider adding ARIA attributes for better accessibility.

The vertical layout structure is well-organized with proper spacing and alignment. The use of Tailwind CSS classes is consistent with modern best practices.

Consider adding these accessibility improvements:

 <div
     v-if="has_options" v-for="(label, val) in field.options"
-    class="wpuf-relative wpuf-flex wpuf-items-center">
+    class="wpuf-relative wpuf-flex wpuf-items-center"
+    role="group"
+    :aria-labelledby="'checkbox-group-' + field.name">

---

20-35: Consider using a CSS custom property for fine-tuned adjustments.

The horizontal layout implementation is clean, but the hardcoded margin adjustment (!wpuf-mt-[.5px]) could be made more maintainable.

Consider this approach for better maintainability:

-class="!wpuf-mt-[.5px] wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600">
+class="wpuf-checkbox-input wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600">

Add this to your CSS:

.wpuf-checkbox-input {
  margin-top: var(--wpuf-checkbox-offset, 0.5px);
}

src/css/admin/form-builder.css (1)

33-43: Consider using Tailwind classes for modal styles.

For consistency with the rest of the codebase, consider refactoring the modal styles to use Tailwind utility classes.

 .wpuf-form-template-modal {
-    background: #fff;
-    position: fixed;
-    top: 5%;
-    bottom: 5%;
-    right: 10%;
-    left: 10%;
-    display: none;
-    box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
-    z-index: 99;
+    @apply wpuf-bg-white wpuf-fixed wpuf-inset-x-[10%] wpuf-top-[5%] wpuf-bottom-[5%] wpuf-hidden wpuf-shadow-lg wpuf-z-[99];
 }

admin/form-builder/assets/js/mixins/add-form-field.js (1)

51-53: Consider extracting Tailwind classes to a shared configuration.

Since these Tailwind classes might be reused across different components, consider extracting them to a shared configuration object or utility function for better maintainability and consistency.

+ const buttonStyles = {
+   default: 'wpuf-p-2 hover:wpuf-cursor-pointer hover:wpuf-text-white'
+ };
+
 computed: {
     action_button_classes: function() {
-        return 'wpuf-p-2 hover:wpuf-cursor-pointer hover:wpuf-text-white';
+        return buttonStyles.default;
     }
 }

admin/form-builder/assets/js/mixins/form-field.js (2)

36-60: Add JSDoc documentation for the new method.

The new builder_class_names method would benefit from documentation explaining its purpose, parameters, and return value.

Add documentation like this:

+/**
+ * Generates class names for form builder elements with Tailwind CSS styling
+ * @param {string} type_class - The type of form field (e.g., 'text', 'email', 'select')
+ * @returns {string[]} Array of class names including type, required, unique identifier, and Tailwind classes
+ */
 builder_class_names: function(type_class) {

---

39-52: Consider extracting Tailwind classes into a configuration object.

The hardcoded Tailwind classes in the switch statement could make maintenance challenging. Consider extracting these into a configuration object for better maintainability.

Here's a suggested refactor:

+const FIELD_STYLES = {
+  default: 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full',
+  upload_btn: 'file-selector wpuf-rounded-md wpuf-btn-secondary'
+};
+
 builder_class_names: function(type_class) {
-    var commonClasses = '';
-
-    switch (type_class) {
-        case 'text':
-        case 'url':
-        case 'email':
-        case 'textareafield':
-        case 'textfield':
-        case 'select':
-            commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
-            break;
-
-        case 'upload_btn':
-            commonClasses = 'file-selector  wpuf-rounded-md wpuf-btn-secondary';
-            break;
-    }
+    const commonClasses = type_class === 'upload_btn' 
+        ? FIELD_STYLES.upload_btn 
+        : FIELD_STYLES.default;

includes/Fields/Form_Field_SectionBreak.php (1)

92-92: Consider documenting the divider property

The addition of the 'divider' property aligns with the form builder UI redesign. However, it would be helpful to document the available options and their visual effects.

Consider adding a code comment above this line explaining:

• The purpose of this property
• Available values beyond 'regular'
• Visual impact of each value

includes/Fields/Form_Pro_Upgrade_Fields.php (1)

66-77: Replace WPUF_SINCE placeholder with actual version number

The @SInCE tag contains a placeholder WPUF_SINCE that needs to be replaced with the actual version number where this feature is being introduced.

- * @since WPUF_SINCE
+ * @since 3.x.x

includes/Fields/Form_Field_reCaptcha.php (2)

190-197: Consider responsive design implications.

While the is_full_width() method works well for desktop views, consider enhancing the form builder's responsive design system to handle different screen sizes gracefully. This could involve:

1. Adding breakpoint-specific behavior
2. Supporting container-relative sizing
3. Implementing mobile-first design principles

---

Line range hint 71-73: Enhance security-related error messaging.

The current error message for missing reCAPTCHA API keys could expose unnecessary information. Consider:

1. Using a more generic message for front-end users
2. Logging detailed errors for administrators
3. Adding proper error handling for API key validation

- esc_html_e( 'reCaptcha API key is missing.', 'wp-user-frontend' );
+ if ( current_user_can( 'manage_options' ) ) {
+     esc_html_e( 'reCaptcha API key is missing. Please configure it in the admin settings.', 'wp-user-frontend' );
+ } else {
+     esc_html_e( 'Form validation is temporarily unavailable. Please contact the administrator.', 'wp-user-frontend' );
+ }

assets/js/wpuf-form-builder-mixins.js (2)

52-57: Consider moving CSS classes to a configuration object.

While the implementation is correct, hardcoding CSS classes in JavaScript can make maintenance more challenging. Consider moving these classes to a configuration object or CSS utility class for better maintainability.

+ // At the top of the file or in a separate config
+ const BUTTON_CLASSES = {
+   action: 'wpuf-p-2 hover:wpuf-cursor-pointer hover:wpuf-text-white'
+ };
+
  computed: {
    action_button_classes: function() {
-     return 'wpuf-p-2 hover:wpuf-cursor-pointer hover:wpuf-text-white';
+     return BUTTON_CLASSES.action;
    }
  },

---

Based on the search results, I can now generate the final response since I have enough information to verify the concern.

No CFA currency implementation found in the codebase.

The currency configuration in wpuf-functions.php doesn't include CFA (West African CFA franc) currency. Since this is a required feature mentioned in the PR objectives but not implemented, this needs to be addressed.

• Add CFA currency configuration in wpuf-functions.php with:
  • Currency code: XOF
  • Label: West African CFA franc
  • Symbol: CFA

🔗 Analysis chain

Line range hint 1-1: Verify CFA currency implementation.

The PR objectives mention adding CFA (West African CFA franc) currency support, but the changes in this file only contain UI-related modifications. Please ensure that the currency implementation is handled in the appropriate files.

---

Let me gather more specific information about the currency implementation.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for currency-related code to verify CFA implementation

# Search for currency-related files and code
echo "Searching for currency-related files..."
fd -e php -e js currency

echo "Searching for CFA or franc related code..."
rg -i "cfa|franc" --type js --type php

echo "Searching for currency configuration or settings..."
rg -i "currency.*settings|currencies" --type js --type php

Length of output: 5865

---

Script:

#!/bin/bash
# Check the currency configuration in wpuf-functions.php
echo "Checking currency configuration in wpuf-functions.php..."
rg -A 20 "wpuf_get_currencies\(\) \{" wpuf-functions.php

# Check for any recent changes to currency-related files
echo -e "\nChecking recent changes to currency files..."
git diff HEAD~5 -- "*currency*" "*.php" "*.js" | grep -A 5 -B 5 -i "currency"

# Look for any currency symbols or codes
echo -e "\nSearching for currency symbols and codes..."
rg -i "XOF|CFA|West African" --type php --type js

Length of output: 131519

includes/Admin/Forms/Admin_Form_Builder.php (1)

262-267: Fix array indentation for consistency.

The indentation in the get_posts array parameters is inconsistent with the surrounding code.

Apply this diff to fix the indentation:

        $forms = get_posts([
            'post_type'   => $post_type,
            'post_status' => 'any',
        ]);

admin/form-builder/assets/js/components/form-column_field/index.js (2)

122-125: LGTM! Consider documenting the styling purpose.

The new computed property cleanly adds Tailwind CSS classes for hover effects. However, consider adding a brief comment explaining its styling purpose for better maintainability.

 computed: {
+    /**
+     * Returns Tailwind CSS classes for action button hover effects
+     * @returns {string} CSS classes
+     */
     action_button_classes: function() {
         return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
     }
 }

---

Line range hint 1-385: Consider modernizing the component architecture.

While the new styling changes look good, the component could benefit from some architectural improvements:

1. Replace jQuery UI dependencies with native Vue.js drag-and-drop
2. Move complex DOM manipulations to Vue.js reactivity system
3. Consider breaking down the large component into smaller, focused components

Would you like me to provide a detailed plan for modernizing this component's architecture?

includes/Admin/Forms/Admin_Form.php (3)

199-219: LGTM! Consider adding ARIA attributes for better accessibility.

The Vue.js integration for tab panels is well-implemented. The v-show directive is appropriately used for managing visibility.

Consider adding ARIA attributes to improve accessibility:

-<div v-show="active_settings_tab === '#wpuf-metabox-settings'" id="wpuf-metabox-settings" class="group">
+<div v-show="active_settings_tab === '#wpuf-metabox-settings'" 
+     id="wpuf-metabox-settings" 
+     class="group"
+     role="tabpanel"
+     :aria-hidden="active_settings_tab !== '#wpuf-metabox-settings'"
+     aria-labelledby="tab-wpuf-metabox-settings">

---

270-274: LGTM! Consider extracting Tailwind classes to a computed property.

The Vue.js integration and Tailwind CSS usage are well-implemented. However, the long string of Tailwind classes could be better organized.

Consider refactoring the classes into a computed property:

-class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none"
+:class="[baseTabClasses, active_tab === 'notification' ? activeTabClasses : '']"

Add to your Vue.js component:

computed: {
  baseTabClasses() {
    return 'wpuf-nav-tab wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm';
  },
  activeTabClasses() {
    return 'wpuf-nav-tab-active hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none';
  }
}

---

290-292: Move inline styles to CSS.

The tab content implementation is good, but the inline style should be moved to CSS for better maintainability.

Move the inline style to your stylesheet:

-<div v-show="active_tab === 'notification'" id="wpuf-form-builder-notification" class="group wpuf-nav-tab" style="padding: 2rem">
+<div v-show="active_tab === 'notification'" id="wpuf-form-builder-notification" class="group wpuf-nav-tab wpuf-notification-tab">

Add to your CSS:

.wpuf-notification-tab {
  padding: 2rem;
}

includes/Admin/Posting.php (2)

32-44: Add proper version number in PHPDoc

The PHPDoc uses a placeholder WPUF_SINCE instead of the actual version number.

-     * @since WPUF_SINCE
+     * @since 4.0.13

---

Line range hint 25-61: Consider improving asset management architecture

The current implementation of version-based asset management could be improved:

1. Create a dedicated asset manager class to centralize asset handling logic
2. Use constants for version numbers
3. Add documentation explaining which versions use which assets
4. Consider using WordPress asset dependencies instead of version checks

Example structure:

class WPUF_Asset_Manager {
    const FORM_BUILDER_VERSION = '4.0.13';
    
    public function init() {
        add_action('admin_enqueue_scripts', [$this, 'handle_admin_assets']);
    }
    
    public function handle_admin_assets() {
        if ($this->should_use_legacy_assets()) {
            wp_enqueue_style('wpuf-form-builder');
        } else {
            wp_enqueue_style('wpuf-admin-form-builder');
        }
    }
    
    private function should_use_legacy_assets() {
        return defined('WPUF_PRO_VERSION') && 
               version_compare(WPUF_PRO_VERSION, self::FORM_BUILDER_VERSION, '<');
    }
}

admin/form-builder/assets/js/form-builder.js (4)

413-418: Review data property initialization.

The new data properties are well-structured but some improvements can be made for better maintainability and type safety.

Consider adding JSDoc comments to document the purpose and type of each property:

 data: {
+    /** @type {boolean} Flag to track if form has unsaved changes */
     isDirty: false,
+    /** @type {boolean} Flag to enable/disable multistep functionality */
     enableMultistep: false,
+    /** @type {boolean} Flag to track shortcode copy state */
     shortcodeCopied: false,
+    /** @type {string} Currently active main tab */
     active_tab: 'form-editor',
+    /** @type {string} Currently active settings tab */
     active_settings_tab: '#wpuf-metabox-settings',
+    /** @type {string} URL for the logo image */
     logoUrl: wpuf_form_builder.assetUrl + '/images/wpuf-icon-circle.svg'
 }

---

494-503: Improve tooltip handling.

The current implementation mixes jQuery tooltips with Vue.js state management, which could lead to synchronization issues.

Consider using a Vue-compatible tooltip library or implementing a pure Vue solution:

-// Show copied tooltip
-$(e.trigger)
-    .attr('data-original-title', 'Shortcode copied!')
-    .tooltip('show');
-
-self.shortcodeCopied = true;
-
-// Reset the copied tooltip
-setTimeout(function() {
-    $(e.trigger).tooltip('hide')
-    .attr('data-original-title', self.i18n.copy_shortcode);
-    self.shortcodeCopied = false;
-}, 1000);

+self.tooltipMessage = 'Shortcode copied!';
+self.shortcodeCopied = true;
+
+setTimeout(() => {
+    self.tooltipMessage = self.i18n.copy_shortcode;
+    self.shortcodeCopied = false;
+}, 1000);

---

893-897: Remove commented-out code.

The commented-out code for resizing the builder container should be either removed or properly implemented.

If this functionality is needed, consider implementing it using Vue's reactive system:

-// resizeBuilderContainer();
-//
-// $("#collapse-menu").click(function () {
-//     resizeBuilderContainer();
-// });

+// If this functionality is needed, implement it in Vue
+watch: {
+    isMenuCollapsed(newValue) {
+        const width = newValue ? 'calc(100% - 80px)' : 'calc(100% - 200px)';
+        this.$refs.formBuilder.style.width = width;
+    }
+}

---

Line range hint 1-924: Consider architectural improvements.

The codebase shows signs of technical debt with mixed usage of jQuery and Vue.js.

1. Consider migrating jQuery-dependent code to Vue.js equivalents:
   • Replace jQuery AJAX calls with Axios or Fetch
   • Use Vue's event system instead of jQuery events
   • Implement Vue components for modular functionality
2. Consider splitting the large Vue instance into smaller, more manageable components
3. Consider using TypeScript for better type safety and maintainability
4. Consider implementing proper error boundaries and error handling

assets/js/wpuf-form-builder.js (4)

413-418: Use consistent naming conventions for variables.

The variables are well-structured but mix camelCase and snake_case naming conventions. Consider using camelCase consistently for all variables to align with JavaScript best practices.

-active_tab: 'form-editor',
-active_settings_tab: '#wpuf-metabox-settings',
+activeTab: 'form-editor',
+activeSettingsTab: '#wpuf-metabox-settings',

---

494-503: Consider extracting tooltip messages to constants.

The tooltip messages are hardcoded. Consider extracting them to constants or i18n translations for better maintainability and localization support.

+const TOOLTIP_MESSAGES = {
+    COPIED: 'Shortcode copied!',
+    DEFAULT: self.i18n.copy_shortcode
+};

-    .attr('data-original-title', 'Shortcode copied!')
+    .attr('data-original-title', TOOLTIP_MESSAGES.COPIED)
     .tooltip('show');

-    .attr('data-original-title', self.i18n.copy_shortcode);
+    .attr('data-original-title', TOOLTIP_MESSAGES.DEFAULT);

---

517-518: Consider using Vue's native event handling.

While the current implementation works, consider using Vue's native event handling instead of jQuery for better consistency with the Vue architecture.

-setActiveSettingsTab: function (e) {
-    this.active_settings_tab = $(e.target).attr('href');
+setActiveSettingsTab: function (tab) {
+    this.activeSettingsTab = tab;
},

---

893-897: Remove commented out code.

Instead of keeping commented out code, remove it entirely. Version control systems can track historical changes if needed.

-        // resizeBuilderContainer();
-        //
-        // $("#collapse-menu").click(function () {
-        //     resizeBuilderContainer();
-        // });

assets/js/wpuf-form-builder-components.js (1)

926-929: LGTM: Hover effects enhance button interactivity.

The new computed property adds appropriate hover effects to action buttons using Tailwind CSS classes, improving the visual feedback for users.

Consider extracting these classes to a shared mixin since they might be reused across other action buttons in the form builder:

-action_button_classes: function() {
-    return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
-}

Add to a new mixin file:

// mixins/button-styles.js
export default {
  computed: {
    action_button_classes() {
      return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
    }
  }
}